<template>
  <div class="bg-f2">
    <div class="bg-f2 bg-fff">
      <el-card>
        <el-table
          :header-cell-style="{ backgroundColor: '#ECF3FC', color: '#333', height: '48px', borderBottom: '1px solid #CEE1F7' }"
          ref="multipleTable"
          :data="roleList"
          stripe
          border
          highlight-current-row
          style="width: 100%"
          :default-sort="{ prop: 'CJSJ', order: 'descending' }"
          v-loading="tableLoad"
        >
          <!-- 提示语句 -->
          <template slot="empty">{{ tableMessage }}</template>
          <el-table-column prop="sbxlh" label="序列号"></el-table-column>
          <el-table-column prop="ip" label="IP地址"></el-table-column>
          <el-table-column prop="fsxx" label="发送内容">
            <template slot-scope="scope">
              <el-tooltip effect="dark" placement="top-start" v-show="scope.row.fsxx === null || scope.row.fsxx.length > 132 ? true : false">
                <div slot="content" style="width: 400px">{{ scope.row.fsxx }}</div>
                <span :class="scope.row.fsxx === null || scope.row.fsxx.length > 132 ? 'usersNumber' : ''">{{ scope.row.fsxx }}</span>
              </el-tooltip>
              <span v-show="scope.row.fsxx === null || scope.row.fsxx.length > 132 ? false : true">{{ scope.row.fsxx }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="lhsj" label="检测时间">
            <template slot-scope="scope">{{ scope.row.lhsj | dateFormat }}</template>
          </el-table-column>
        </el-table>
        <div class="pageFloat">
          <el-pagination
            background
            small
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[10, 20, 30, 50]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next"
            :total="total"
          ></el-pagination>
        </div>
      </el-card>
    </div>
  </div>
</template>
<script>
import { ziC } from '../../utils/allUrl.js'
// import { endLoading } from '../../utils/loading.js'
import { timeLoad, tableMessageText } from '@/assets/js/setTime'
export default {
  data: function () {
    return {
      harderBox: {
        riqi: '',
        nameList: '',
      },
      currentPage: 1,
      pageSize: 10,
      roleList: [],
      total: 0,
      tableLoad: false,
      tableTimer: null,
      tableMessage: '',
    }
  },
  watch: {
    tableLoad(newVal, oldVal) {
      this.tableTimer = setTimeout(() => {
        if (this.tableLoad) {
          this.tableLoad = false
          this.roleList = []
          this.tableMessage = tableMessageText
          // this.total = 0
        }
      }, timeLoad)
    },
  },
  created: function () {
    this.getList()
  },
  methods: {
    // 获取数据
    getList() {
      clearTimeout(this.tableTimer)
      this.tableLoad = true
      const params = new URLSearchParams()
      params.append('M_', this.currentPage)
      params.append('N_', this.pageSize)
      params.append('BAZT', 1)
      this.setList(params)
    },
    async setList(params) {
      const { data: res } = await this.$http.post(`${ziC}zcba/list`, params)
      switch (res.code) {
        case '0000':
          this.roleList = res.data.list
          this.total = res.data.countList
          break
        default:
          this.roleList = []
          this.total = 0
          this.tableMessage = res.message
          break
      }
      this.tableLoad = false // 表格加载中样式
    },
    handleSizeChange(newsize) {
      this.currentPage = 1
      this.pageSize = newsize
      this.getList()
    },
    handleCurrentChange(newChange) {
      this.currentPage = newChange
      this.getList()
    },
  },
}
</script>
<style lang="scss" scoped>
.btn_header {
  height: 35px;
  line-height: 33px;
  margin: 15px 0;
  > li:first-child {
    margin-left: 0;
  }
  > li {
    float: left;
    margin-left: 10px;
  }
  .max_btn {
    width: 105px;
    height: 34px;
    line-height: 34px;
    padding: 0;
  }
  .search_btn {
    width: 220px;
  }
  .max_btn2 {
    height: 34px;
    line-height: 34px;
    padding: 0 12px;
  }
}
.addMargin {
  height: 55px;
  line-height: 67px;
}
.operation {
  display: inline-block;
  margin: 0 5px;
  height: 10px;
  border-left: 1.5px solid #b3b3b3;
}
.el-card {
  // margin-top: 15px;
  border-radius: 0;
  .tiIcon {
    font-size: 14px;
    margin-left: 5px;
    cursor: pointer;
  }
}
.pageFloat {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  height: 48px;
}
.usersNumber {
  cursor: pointer;
  overflow: hidden;
  -webkit-line-clamp: 2;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  white-space: nowrap;
  position: relative;
}
.usersNumber:after {
  content: '...';
  text-align: right;
  position: absolute;
  bottom: 0;
  right: 0;
  width: 10%;
  height: 1.8em;
  background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 50%);
}
</style>
